<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<!--<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    
    <script type="text/javascript" src="http://localhost:8010/js/mapapi3.8.6.js">
    </script>
    -->
    <?php echo $this->headScript()->appendFile($this->baseUrl('js/mapapi3.8.6.js')) ?>

<script type="text/javascript">
  
  
    var map;
    var marker;
    function initialize() {
      var myLatlng = new google.maps.LatLng(40.0053681, 116.4769563);
      var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      
      google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
      });
    }
      
    function placeMarker(location) {
    	if(marker){
    	    //map.removeOverlay(marker);
    		marker.setMap(null);
    	}
        marker = new google.maps.Marker({
          	position: location, 
          	map: map
      	});
        document.getElementById("latitude").value = location.lat();
        document.getElementById("longtitude").value = location.lng();
      	map.setCenter(location);
    }
</script>
</head>
<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:60%"></div>


<p>æˆ‘åœ¨ä»¥ä¸Šä½�ç½®ï¼Œæƒ³è¦�: </p>
<form id="form1" name="form1" method="post" action="wannaRequest.php">
<input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longtitude" id="longtitude">
  <select name="wannaType" size="1">
    <option value="1">eat</option>
    <option value="2">pick up</option>
    <option value="3">shopping</option>
  </select>
  Description:
  <input type="text" name="wannaDescription">
  <input type="submit" name="Submit" value="submit" />
  <input type="reset" name="Reset" value="Reset" />
</form>
<p>History</p>
<table width="50%" border="1">
  <caption>
    My Wanna List
  </caption>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Time</th>
    <th scope="col">Type</th>
    <th scope="col">Description</th>
    <th scope="col">Latitude</th>
    <th scope="col">Longtitude</th>
  </tr>
  <?php
  foreach($this->mywanna as $value){
 ?>
  <tr>
    <td><?php echo htmlspecialchars($value->userID);?></td>
    <td><?php echo $value->CreateTime?></td>
    <td><?php echo $value->wannaType?></td>
    <td><?php echo $value->WannaDescription?></td>
    <td><?php echo $value['latitude']?></td>
    <td><?php echo $value['longtitude']?></td>
  </tr>

  <?php
  }
	?>
  
 
</table>

<p>friends around</p>
<table width="50%" border="1">
  <caption>
    Wanna List
  </caption>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Time</th>
    <th scope="col">Type</th>
    <th scope="col">Description</th>
    
  </tr>
  <?php
	echo $this->friendswanna;
	?>
  
 
</table>

</body>
</html>